// order.vue
<template>
  <div>
    <!-- 不同状态的组件样式 -->
    <section v-if="orderIsInit"></section>
    <section v-if="orderIsCreated"></section>
    <section v-if="orderIsArrearage"></section>
    <section v-if="orderIsPurchased"></section>
    <section v-if="orderIsShipped"></section>
    <section v-if="orderIsCompleted"></section>
  </div>
</template>

<script>
// 将页面组件按状态划分，实现独立自治，这样子既能防止代码耦合，方便维护 debug，也方便开发者自测
// 如果需要看不同状态的展示效果，只要手动给 orderStatus 赋值即可，方便快捷。
import ORDER_STATUS from './contants';
import eq from 'lodash';

export default {
  computed: {
    /**
     * @func
     * @name orderIsInit
     * @desc 判断订单是否初始化的状态
     * @returns {string} 判断订单是否初始化的状态
     */
    orderIsInit() {
      return eq(this.orderStatus, ORDER_STATUS.INIT);
    },
    /**
     * @func
     * @name orderIsCreated
     * @desc 判断订单是否已创建的状态
     * @returns {string} 订单是否已创建
     */
    orderIsCreated() {
      return eq(this.orderStatus, ORDER_STATUS.CREATED);
    },
    /**
     * @func
     * @name orderIsArrearage
     * @desc 判断订单是否未付款的状态
     * @returns {string} 订单是否未付款
     */
    orderIsArrearage() {
      return eq(this.orderStatus, ORDER_STATUS.ARREARAGE);
    },
    /**
     * @func
     * @name orderIsPurchased
     * @desc 判断订单是否已购买的状态
     * @returns {string} 订单是否已购买
     */
    orderIsPurchased() {
      return eq(this.orderStatus, ORDER_STATUS.PURCHASED);
    },
    /**
     * @func
     * @name orderIsShipped
     * @desc 判断订单是否已发货的状态
     * @returns {string} 订单是否已发货
     */
    orderIsShipped() {
      return eq(this.orderStatus, ORDER_STATUS.SHIPPED);
    },
    /**
     * @func
     * @name orderIsCompleted
     * @desc 判断订单是否已完成的状态
     * @returns {string} 订单是否已完成
     */
    orderIsCompleted() {
      return eq(this.orderStatus, ORDER_STATUS.COMPLETED);
    },
  },
  data() {
    return {
      orderStatus: ORDER_STATUS.INIT // 订单状态
    }
  },
  methods: {
    /**
     * @func
     * @name getOrderStatus
     * @desc 判断订单状态
     * @returns {string} 返回当前订单状态
     */
    async getOrderStatus() {}
  },
  async created() {
    this.orderStatus = await this.getOrderStatus();
  }
}
</script>